<template>
  <div>
    <common-head :title="$route.name" @delete="delteItems">
      <van-icon name="delete-o" />
    </common-head>
    <div class="wrap">
      <div class="items">
        <div class="item" v-for="item in items" :key="item.id">
          <van-swipe-cell>
            <div class="item-wrap">
              <van-checkbox
                @click="itemCheckChange(!item.selected, item.key)"
                :value="item.selected"
              />
              <van-card
                :num="item.number"
                :price="item.price"
                :title="item.name"
                :thumb="item.pic"
              >
                <template #footer>
                  <van-stepper
                    @change="
                      (value) => {
                        itemNumChange(value, item.key);
                      }
                    "
                    :default-value="item.number"
                  />
                </template>
              </van-card>
            </div>
            <template #right>
              <van-button
                square
                @click="delItem(item.key)"
                text="删除"
                type="danger"
                class="delete-button"
              />
            </template>
          </van-swipe-cell>
        </div>
      </div>
    </div>
    <!-- 提交订单 -->
    <van-submit-bar
      :price="price * 100"
      button-text="提交订单"
      @submit="onSubmit"
    >
      <van-checkbox @click="switchAllChecked" :value="allChecked">全选</van-checkbox>
    </van-submit-bar>
    <!-- /提交订单 -->
    <common-tab />
  </div>
</template>

<script>
import CommonHead from '../../components/CommonHead.vue'
import CommonTab from '../../components/CommonTab.vue'
import { mapActions, mapState } from 'vuex'
import { getToken } from '@utils'
export default {
  components: { CommonTab, CommonHead },
  created () {
    // 请求购物车数据
    this.FETCH_CART_INFO({
      token: getToken()
    })
  },
  methods: {
    onSubmit () {
      // 点击进入确认订单页面
      this.$router.push('/orderCreate')
    },
    itemCheckChange (selected, key) {
      // x修改商品选中状态
      this.MUTATE_SELECTED({
        selected,
        key,
        token: getToken()
      })
    },
    switchAllChecked () {
      // 点击切换全选状态
      // 得到所有商品key
      const keys = []
      this.items.forEach(item => {
        keys.push(item.key)
      })
      this.itemCheckChange(!this.allChecked, keys.join(','))
    },
    delItem (key) {
      // 删除商品
      this.$dialog.confirm({
        title: '删除商品',
        message: '您确认删除嘛'
      })
        .then(() => {
          this.DELETE_ITEM({
            key,
            token: getToken()
          })
        })
    },
    delteItems () {
      // 批量删除
      /*
        删除已经选中商品
        过滤掉未选中 并将 其中 选中商品key 拼接成一个数组
        join(',')
      */
      // 所有要删除商品key的数组
      const deleteKey = []
      this.items.forEach(item => {
        if (item.selected) {
          // 选中了
          deleteKey.push(item.key)
        }
      })
      this.delItem(deleteKey.join(','))
    },
    itemNumChange (number, key) {
      // 修改商品数量
      this.MUTETA_NUM({
        key,
        number,
        token: getToken()
      })
    },
    ...mapActions('cart', [
      'FETCH_CART_INFO',
      'MUTETA_NUM',
      'MUTATE_SELECTED',
      'DELETE_ITEM'
    ])
  },
  computed: {
    ...mapState({
      items: (state) => state.cart.items,
      number: (state) => state.cart.number,
      price: (state) => state.cart.price
    }),
    allChecked () {
      // 全选状态
      return this.items.every((item) => item.selected)
    }
  },
  name: 'Cart'
}
</script>

<style lang="scss" scoped>
.wrap {
  padding-top: 46px;
  padding-bottom: 100px;
  .delete-button {
    height: 100%;
  }
  .item-wrap {
    display: flex;
    background-color: #fafafa;
    .van-checkbox {
      margin: 0 10px;
    }
    .van-card {
      flex: 1;
    }
  }
}
.van-submit-bar {
  bottom: 50px;
}
</style>
